<template>
  <div class="ordering">
    <div>
      <el-breadcrumb :separator-icon="icon">
        <el-breadcrumb-item :to="{path: '/dish'}">菜品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加菜品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--菜品类目-->
    <div class="content-view-ten">
      <div class="image-view-title">
        <div class="image-list">菜品类目</div>
        <div>
          <el-select
            v-model="catevalue"
            clearable
            placeholder="请选择菜品类目"
            style="width: 240px"
          >
            <el-option
              v-for="item in cate"
              :key="item.value"
              :label="item.SoupName"
              :value="item.SoupName"
            />
          </el-select>
        </div>
      </div>
      <!--菜品名称-->
      <div class="image-view-title">
        <div class="image-list">菜品名称</div>
        <el-input v-model="dish_name" placeholder="请输入菜品名称" clearable />
      </div>

      <!--菜品价格-->
      <div class="image-view-title">
        <div class="image-list">菜品价格(元)</div>
        <div class="opload-option">
          <el-input
            v-model="unitprice"
            type="number"
            placeholder="请输入菜品价格"
            clearable
          />
          <el-select v-model="compvalue" clearable placeholder="请选择单位">
            <el-option
              v-for="item in company"
              :key="item.label"
              :label="item.Unitname"
              :value="item.Unitname"
            />
          </el-select>
          <el-input
            v-if="compvalue == '自定义单位'"
            v-model="unit"
            placeholder="请输入自定义单位"
            clearable
          />
          <div v-if="compvalue == '自定义单位'">
            <el-button
              type="success"
              style="width: 100%; padding: 12px 20px"
              @click="addounce"
              :loading="unitloading"
              >添加自定义单位</el-button
            >
          </div>
        </div>
      </div>

      <!--菜品名称-->
      <div class="image-view-title">
        <div class="image-list">图片上传</div>
        <div>
          <el-upload
            :action="imgurls"
            list-type="picture-card"
            accept=".jpg,.png,.webp,.jpeg,.jfif"
            :file-list="goodsimage"
            :on-preview="onpreview"
            :on-remove="onremove"
            :on-success="onsuccess"
            :on-error="onerror"
            :on-progress="onprogress"
            :before-upload="project"
            :limit="1"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img width="100%" :src="dialogimageUrl" alt="" />
          </el-dialog>
        </div>
      </div>
      <!--提交-->
      <div class="sub-button">
        <el-button
          type="success"
          @click="btn_submit"
          style="width: 200px; padding: 12px 20px"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import {ArrowRight, Plus} from "@element-plus/icons-vue";
import {useRouter, useRoute} from "vue-router";
import {
  reactive,
  shallowRef,
  toRefs,
  getCurrentInstance,
  toRaw,
  onMounted,
} from "vue";
export default {
  components: {
    ArrowRight,
    Plus,
  },
  setup() {
    const icon = shallowRef(ArrowRight);
    const {proxy} = getCurrentInstance();
    const imgurls = proxy.$urls.m().uploadimg;
    const jumprouter = useRouter(); //跳转路由
    const routerget = useRoute(); //接收路由
    const opendata = reactive({
      id: "",
      dish_name: "", //菜品名称
      unitprice: "", //菜品价格
      catevalue: "", //菜品类目选择
      compvalue: "", //单位
      unit: "", //自定义单位
      dialogVisible: false, //是否展示图片
      unitloading: false, //自定义按钮loading加载
      imgurls,
      dialogimageUrl: "", //大图的图片链接
      company: [
        {lable: "1", value: "1"},
        {lable: "2", value: "2"},
      ], //单位列表
      cate: [
        {lable: "1", value: "1"},
        {lable: "2", value: "2"},
      ], //菜品类目选择列表
      goodsimage: [], //上传接收的图片
    });
    // 点击文件列表中已上传的文件时的钩子
    const onpreview = (file) => {
      opendata.dialogVisible = true;
    };
    //文件列表移除文件时的钩子
    const onremove = (file, fileList) => {
      opendata.goodsimage = [];
      opendata.dialogVisible = false;
    };
    //文件上传成功时的钩子
    const onsuccess = (response, file, fileList) => {
      opendata.imageUrl = response.imageUrl;
      opendata.dialogimageUrl = toRaw(response.imageUrl);
      opendata.goodsimage.push({url: response.imageUrl});
    };

    //文件上传失败时的钩子
    const onerror = (err, file, fileList) => {
      new proxy.$tips(err, "error").mess_age();
    };

    //文件上传时的钩子
    const onprogress = (event, file, fileList) => {};

    //上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传
    const project = (event, file, fileList) => {};
    onMounted(() => {
      getsoups();
      getunnces();
    });
    //获取菜品类目
    async function getsoups() {
      try {
        const obj = {SoupName: null};
        const res = await new proxy.$request(
          proxy.$urls.m().soupsget,
          obj
        ).modePost();
        opendata.cate = res.data.soupsList;
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    //获取菜品单位
    async function getunnces() {
      try {
        const obj = {Unitname: null};
        const res = await new proxy.$request(
          proxy.$urls.m().ounceget,
          obj
        ).modePost();
        opendata.company = res.data.ounceList;
        opendata.company.push({
          Unitname: "自定义单位",
          createdAt: "2024-03-28 14:00:00",
          id: "11adef2f-2592-4ea7-8719-058b02af1012",
          updatedAt: "2024-3-28 14:00:00",
        });
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    //菜品单位添加
    async function ounceadd() {
      try {
        const obj = {Unitname: opendata.unit};
        const res = await new proxy.$request(
          proxy.$urls.m().ounceadd,
          obj
        ).modePost();
        await getunnces();
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    function addounce() {
      opendata.unitloading = true;
      ounceadd();
      opendata.compvalue = opendata.unit;
      opendata.unitloading = false;
    }

    //菜品添加提交
    async function addfoodMenu() {
      try {
        const obj = {
          id:opendata.id,
          dishName: opendata.dish_name,
          price: opendata.unitprice,
          SoupName: opendata.catevalue,
          Unitname: opendata.compvalue,
          image: opendata.dialogimageUrl,
          isAvailable: 1,
          remainingQuantity: 999,
        };
        
        const res = await new proxy.$request(
          proxy.$urls.m().addfoodMenu,
          obj
        ).modePost();
        new proxy.$tips("菜品提交成功").mess_age();
        new proxy.$router.push("/dish");
      } catch (e) {
        new proxy.$tips(e, "error").mess_age();
      }
    }
    //提交
    function btn_submit() {
      addfoodMenu();
    }

    //接收路由消息

    const etid_data = routerget.query.val;
    if (etid_data != undefined) {
      const values = JSON.parse(etid_data);
      opendata.id = values.id;
      opendata.dish_name = values.dishName;
      opendata.catevalue = values.SoupName;
      opendata.compvalue = values.Unitname;
      opendata.goodsimage =[{name:values.dishName,url:values.image}];
      opendata.dialogimageUrl = values.image;

      opendata.unitprice = values.price;
      console.log(values);
    }
    return {
      icon,
      ...toRefs(opendata),
      onpreview,
      onremove,
      onsuccess,
      onerror,
      onprogress,
      project,
      addounce,
      btn_submit,
    };
  },
};
</script>

<style scoped="scoped">
.opload-option {
  display: flex;
  align-items: center;
  justify-content: left;
}
.opload-option div {
  width: 25% !important;
  margin-right: 5px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.centered-button {
  display: block;
  margin: 0 auto;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
